<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>
</head>

<body>
  <!-- react操作的容器 -->
  <button id="btn">点击重新渲染修改内容</button>
  <div id="app"></div>
</body>

<script type="text/babel">

  const score = ["html", "js", "css", "vue"]

  const jsx = (
    <ul>
      {
        score.map((item) => {
          return <li>{item}</li>
        })
      }
    </ul>
  )
  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(jsx)


  //当点击按钮的时候,创建一个新的oDiv虚拟dom,和旧的oDiv这个虚拟DOM的区别是修改了某一个节点
  //重新把新的oDIV渲染到root中
  //打开调试工具 发现只更新了改变的部分

  const oBtn = document.querySelector("#btn")
  oBtn.onclick = function () {
    score.push("springboot")
    const jsx = (
      <ul>
        {
          score.map((item) => {
            return <li>{item}</li>
          })
        }
      </ul>
    )
    root.render(jsx)




  }





/*   Https  
  http 加密 认证 完整性
  加密
  客户端 syn
  服务端 syn ack
  客户端 ack
  服务端 ack 

  客户端 fin 断开
  服务端 ack 响应断开
  服务端 fin  数据处理完 发送 fin 请求断开连接
  客户端 ack 应答 断开请求 */






</script>


</html>